<html>
  <head>
    <title>hello react</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="../../js/react.production.min.js"></script>
    <script type="text/javascript" src="../../js/react-dom.production.min.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <script type="text/babel">
      const vDOM = <h1>hello react</h1>
      ReactDOM.render(vDOM, document.getElementById('root'));
      const RDOM = document.getElementById('root');
      console.log('虚拟DOM', vDOM);
      console.log('真实DOM', RDOM);
      debugger;
      /**
       * 关于虚拟DOM
       * 1. 本质是Object类型的对象
       * 2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM在React内部使用，无需真实DOM那么多属性
       * 3. 虚拟DOM最终会被React转化为真实DOM
       */
    </script>
  </body>
</html>
